<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    on-ok="handleOk"
    switch-fullscreen
    :footer="null"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="false">
      <ants-form-container :disabled="false">
        <a-form slot="detail" :form="form">
          <a-row>
            <a-col>
              <a-form-item label="用户名" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input
                  v-decorator="['username', { rules: [{ required: true, message: 'Please input your note!' }] }]"
                />
              </a-form-item>
            </a-col>
            <a-col>
              <a-form-item label="密码" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input-password
                  v-decorator="['password', { rules: [{ required: true, message: 'Please input your note!' }] }]"
                />
              </a-form-item>
            </a-col>

            <a-col>
              <a-form-item label="验证码" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input style="width: 60%" placeholder="请输入下方验证码!"
                         v-decorator="['captcha', { rules: [{ required: true, message: '请输入下方验证码!' }] }]"
                />
                <a-button type="primary" ghost style="width: 35%; margin-left: 5%" @click="getReCaptcha"
                          :loading="captchaBtnLoading" :disabled="captchaBtnDisabled">
                  {{ captchaTitle }}
                </a-button>
              </a-form-item>
            </a-col>

            <a-col>
              <img :src="captchaImg" alt="" style="display: block;margin-left: auto;margin-right: auto;">
<!--              <a-button type="link" @click="getCaptcha">-->
<!--                看不清换一张-->
<!--              </a-button>-->
            </a-col>
            <a-col :span="24" style="text-align: center;padding: 10px">
              <a-button type="primary" ghost style="width: 30%;" @click="handleLogin" :loading="loading">
                登录
              </a-button>
              <a-button type="primary" ghost style="width: 30%;margin-left: 10px" @click="register" :loading="loading">
                注册
              </a-button>
            </a-col>
          </a-row>

        </a-form>
      </ants-form-container>
    </a-spin>


    <article-register-modal ref="articleRegisterModal"/>
  </a-modal>
</template>

<script>
import AntsFormContainer from '@/components/ants/AntsFormContainer'
import ArticleRegisterModal from './ArticleRegisterModal'
import {getAction} from "@/api/manage";

export default {
  name: 'ArticleModal',
  inject: ['reload'],
  components: {
    AntsFormContainer,
    ArticleRegisterModal
  },
  data() {
    return {
      form: this.$form.createForm(this),
      url: {
        getCaptcha: '/sys/getCaptcha'
      },
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 4}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
      },
      title: '登录',
      width: 600,
      visible: false,
      disableSubmit: false,
      loading: false,
      captchaBtnDisabled: false,
      captchaTimer: '',
      captchaSecond: '',
      captchaBtnLoading: false,
      captchaImg: '',
      checkKey: '',
    }
  },
  //计算属性
  computed: {
    captchaTitle() {
      return this.captchaBtnDisabled ? `重新获取 ( ${this.captchaSecond} ) s` : '获取验证码';
    },
  },
  methods: {
    show() {
      this.visible = true
      this.getCaptcha()
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      this.visible = false
    },
    getCaptcha() {
      let that = this
      getAction(that.url.getCaptcha).then(res => {
        if (res.success) {
          that.captchaImg = res.result.image
          that.checkKey = res.result.key
          that.captchaBtnLoading = false

        }
      }).catch(e => {
        that.captchaBtnLoading = false
      })
    },
    getReCaptcha() {
      this.captchaBtnLoading = true
      this.getCaptcha()
      this.timeDown()
    },
    timeDown() {
      let that = this
      clearInterval(that.captchaTimer)
      this.captchaTimer = null
      let s = 60  //倒计时间
      if (!that.captchaTimer) {
        that.captchaSecond = s
        that.captchaBtnDisabled = true
        that.captchaTimer = setInterval(() => {
          if (that.captchaSecond > 0 && this.captchaSecond <= s) {
            that.captchaSecond--
          } else {
            that.captchaBtnDisabled = false
            clearInterval(that.captchaTimer)
            this.captchaTimer = null
          }
        }, 1000)
      }
    },
    handleLogin() {
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          const formData = Object.assign(this.model, values)
          formData.checkKey = this.checkKey
          this.loading = true
          this.$store.dispatch('user/login', formData)
            .then(res => {
              this.visible = false
              // this.$router.push({ path: '/index' })
              this.reload()
              this.loading = false
            })
            .catch((e) => {
              this.getCaptcha()
              this.loading = false
            })
        } else {
          return false
        }
      })
    },
    register() {
      this.visible = false
      this.$refs.articleRegisterModal.register()
    }
  }
}
</script>
